<template>
  <view>
    <view class="top_">
      <view>18206095353</view>
    </view>

    <view class="ss_kuangkuang">
      <view class="ding_ss">
        <image src="/static/img/搜索.png" class="sousuo" @click="search"></image>
        <input v-model="keyword" class="input_md" type="text" placeholder="搜索门店"/>
      </view>

      <view class="dianji_ss">
        <view>搜索</view>
      </view>
    </view>

    <view class="page" v-if="list.length > 0">
      <view class="page_kk" v-for="(item,index) in list" :key="index" :data-index="index" @click="changeshop">
        <view>
          <view class="text1">{{ item.name }}</view>
          <view class="text2">{{ item.address }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/xuanzemendian/xuanzemendian.js
var app = getApp();
import {mendianstatistics} from "@/common/api";

export default {
  data() {
    return {
      limit: 20,
      page: 1,
      keyword: '',
      list: [],
      nextpageflag: true
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.mendianstatistics()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.nextpageflag) {
      const page = this.page + 1
      this.setData({
        page: page
      })
      this.mendianstatistics()
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    mendianstatistics() {
      const paramData = {
        keyword: this.keyword,
        limit: this.limit,
        page: this.page
      }
      uni.showLoading({
        title: '加载中...'
      });
      mendianstatistics(paramData, (res => {
        console.log(res)
        const list = res.data.data.list
        if (list.length < this.limit) {
          this.setData({
            nextpageflag: false
          })
        }
        const newlist = this.list.concat(list)
        this.setData({
          list: newlist
        })
        uni.hideLoading();
      }))
    },
    search() {
      this.setData({
        page: 1
      })
      this.mendianstatistics()
    },
    changeshop(option) {
      console.log('option',option)
      const index = option.currentTarget.dataset.index
      app.globalData.store_id = this.list[index].id;
      app.storedata=this.list[index]
      uni.switchTab({url: '/pages/index/index'})
    }
  }
};
</script>
<style>
.top_ {
  font-weight: bold;
  font-size: 25rpx;
  margin: 40rpx;
}

.ding_ss {
  display: flex;
  align-items: center;
  background-color: rgb(245, 243, 243);
  border-radius: 10rpx;
  width: 70%;
  margin: 10rpx 20rpx 20rpx 40rpx;
}

.sousuo {
  width: 60rpx;
  height: 75rpx;
}

.ss_kuangkuang {
  display: flex;
  align-items: center;
}

.dianji_ss {
  background-color: rgb(240, 178, 6);
  padding: 15rpx 20rpx 15rpx 20rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
  color: rgb(255, 255, 255);
}

.page {
  height: 85vh;
  background-color: rgba(236, 236, 236, 0.555);
  padding: 20rpx;
}

.page_kk {
  background-color: rgb(252, 194, 106);
  height: 180rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(177, 62, 17);
  font-weight: bold;
  border-radius: 10rpx;
}

.text1 {
  font-family: '黑体', 'SimSun', sans-serif;
  font-size: rpx;
  margin: 0 0 30rpx 0;
}

.text2 {
  font-size: 25rpx;
}
</style>
